<template>
	<div class="cachetab1">
		<div class="leftbox">
			<ul>
				<template v-for="(item,index) in lxlist"  >
					<li :key="item.id" v-if="index%2==0">
						<!-- type等于4的样式 -->
						<div class="cace_one" v-if="item.type==4">
							<img :src="item.dataDetail.image">
						</div>
						<!-- type等于7的样式 -->
						<div class="cace_two"  v-if="item.type==7">
							<article>
								<img :src="item.dataDetail.image">
								<img src="../../../../public/images/ct1_3.png" >
								<h3>{{item.dataDetail.title}}</h3>
								<p>{{item.dataDetail.numLabel}}</p>
							</article>	
						</div>
						<!-- type等于1的样式 -->
						<div class="cace_three" v-if="item.type==1">
								<article>
									<h4>{{item.dataDetail.placeLabel}}</h4>
									<img :src="item.dataDetail.image">
									<p class="re"  v-if="item.dataDetail.tagList !=''">{{item.dataDetail.tagList[0]}}</p>
								</article>
								<aside>
									<h4>{{item.dataDetail.title}}</h4>
									<h5>'{{item.dataDetail.productType}} · {{item.dataDetail.productCat}} · {{item.dataDetail.days}}'</h5>
									<article>
										<p>
											<span>￥</span><strong>{{item.dataDetail.priceLabel}} </strong><span>起</span>
										</p>
										<p>
											{{item.dataDetail.numLabel}}
										</p>
									</article>
								</aside>
							</div>
						<!-- type等于5的样式 -->
						<div class="cace_four"  v-if="item.type== 5">
							<article>
								<img :src="item.dataDetail.image">
								<p class="re"><img src="../../../../public/images/ct1_8.png" ></p>
							</article>
							<aside>
								<h4>{{item.dataDetail.title}}</h4>
									<article>
										<aside>
											<img :src="item.dataDetail.avatar">
											<img src="../../../../public/images/ct1_10.png" >
										</aside>
										<span>{{item.dataDetail.username}}</span>
										<span>{{item.dataDetail.numLabel}}</span>
									</article>
							</aside>
						</div>
						
						<!-- type等于6的样式 -->
						<div class="cace_five" v-if="item.type==6">
							<article>
								<img :src="item.dataDetail.image">
								<p class="re">攻略</p>
								<h4>{{item.dataDetail.title}}</h4>
								<p>{{item.dataDetail.numLabel}}</p>
							</article>
						</div>
						<!-- type等于3的样式 -->
						<div class="cace_six" v-if="item.type==3">
							<img :src="item.dataDetail.image">
							<article>
								<img src="../../../../public/images/ct1_13.png" >
								<h3>{{item.dataDetail.title}}</h3>
								<aside>
									<p>{{item.dataDetail.tagList[0]}}</p>
									<p>{{item.dataDetail.tagList[1]}}</p>
								</aside>
								<h4>{{item.dataDetail.subTitle}}</h4>
							</article>
						</div>
						<!-- type等于10的样式 -->
						<div class="cace_seven" v-if="item.type==10">
							<img :src="item.dataDetail.image">
							<img :src="item.dataDetail.typeImage">
							<h3>{{item.dataDetail.title}}</h3>
							<h4>{{item.dataDetail.subTitle}}</h4>
						</div>
					</li>
				</template>
			</ul>
		</div>
		<div class="rightbox">
			<ul>	
				<template v-for="(item,index) in lxlist">
					<li :key="item.id" v-if="index%2==1">
					<!-- type等于3的样式 -->
					<div class="cace_six" v-if="item.type==3">
						<img :src="item.dataDetail.image">
						<article>
							<img src="../../../../public/images/ct1_13.png" >
							<h3>{{item.dataDetail.title}}</h3>
							<aside>
								<p>{{item.dataDetail.tagList[0]}}</p>
								<p>{{item.dataDetail.tagList[1]}}</p>
							</aside>
							<h4>{{item.dataDetail.subTitle}}</h4>
						</article>
					</div>	
					<!-- type等于4的样式 -->
					<div class="cace_one" v-if="item.type==4">
						<img :src="item.dataDetail.image">
					</div>
					<!-- type等于7的样式 -->
					<div class="cace_two"  v-if="item.type==7">
						<article>
							<img :src="item.dataDetail.image">
							<img src="../../../../public/images/ct1_3.png" >
							<h3>{{item.dataDetail.title}}</h3>
							<p>{{item.dataDetail.numLabel}}</p>
						</article>	
					</div>
					<!-- type等于1的样式 -->
					<div class="cace_three" v-if="item.type==1">
							<article>
								<h4>{{item.dataDetail.placeLabel}}</h4>
								<img :src="item.dataDetail.image">
								<p class="re"  v-if="item.dataDetail.tagList !=''">{{item.dataDetail.tagList[0]}}</p>
							</article>
							<aside>
								<h4>{{item.dataDetail.title}}</h4>
								<h5>'{{item.dataDetail.productType}} · {{item.dataDetail.productCat}} · {{item.dataDetail.days}}'</h5>
								<article>
									<p>
										<span>￥</span><strong>{{item.dataDetail.priceLabel}} </strong><span>起</span>
									</p>
									<p>
										{{item.dataDetail.numLabel}}
									</p>
								</article>
							</aside>
						</div>
					<!-- type等于5的样式 -->
					<div class="cace_four"  v-if="item.type== 5">
						<article>
							<img :src="item.dataDetail.image">
							<p class="re"><img src="../../../../public/images/ct1_8.png" ></p>
						</article>
						<aside>
							<h4>{{item.dataDetail.title}}</h4>
								<article>
									<aside>
										<img :src="item.dataDetail.avatar">
										<img src="../../../../public/images/ct1_10.png" >
									</aside>
									<span>{{item.dataDetail.username}}</span>
									<span>{{item.dataDetail.numLabel}}</span>
								</article>
						</aside>
					</div>
					<!-- type等于6的样式 -->
					<div class="cace_five" v-if="item.type==6">
						<article>
							<img :src="item.dataDetail.image">
							<p class="re">攻略</p>
							<h4>{{item.dataDetail.title}}</h4>
							<p>{{item.dataDetail.numLabel}}</p>
						</article>
					</div>
					<!-- type等于10的样式 -->
					<div class="cace_seven" v-if="item.type==10">
						<img :src="item.dataDetail.image">
						<img :src="item.dataDetail.typeImage">
						<h3>{{item.dataDetail.title}}</h3>
						<h4>{{item.dataDetail.subTitle}}</h4>
					</div>
					</li>
				</template>
			</ul>
		</div>
	</div>
</template>

<script>
	export default{
		name:'CacheTab1',
		props:["propmsg"],
		data(){
			return{
				lxlist:[],
				id:1,
				a:1,
			}
		},
		watch:{
			propmsg(x){
				this.a=x
				this.id=1
				this.get()
				
			}
		},

		methods:{
			get(){
				let that=this
				this.axios.get('https://m.youxiake.com/api/m/index/flow/recommend?sitecode=1&city_id=1&type='+this.a+'&page=1').then( (res)=> {
					// console.log(res.data.data);
					that.lxlist = res.data.data.list
					// console.log(this.lxlist);
				}).catch( (error)=> {
					console.log(error);
				});
			},
			renew(){
				let that=this
				this.axios.get('https://m.youxiake.com/api/m/index/flow/recommend?sitecode=1&city_id=1&type='+this.a+'&page='+this.id).then( (res)=> {
					
					that.lxlist = this.lxlist.concat(res.data.data.list)
					// console.log(res);
					console.log(this.lxlist);
				}).catch( (error)=> {
					console.log(error);
				});
			}

		},
		mounted() {
			window.addEventListener('scroll', () => {
			  
			        let gdt = document.documentElement.scrollTop || document.body.scrollTop // 滚动条的滚动距离
					// console.log(gdt);
			  
			        let ym = document.compatMode === 'CSS1Compat' ? document.documentElement.clientHeight : document.body.clientHeight // 页面可视高度
					
					// console.log(ym);
			        let zgd = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) // 总高度 
					// console.log(zgd);
					
					if(Number(gdt)+Number(ym)>=Number(zgd)){
						if(this.a>1){
							this.id=1
							this.get()
						}else{
							this.renew()
							this.id++
						}
						
					}

			 })
		},
		

	}
</script>

<style scoped>
	.cachetab1{
		width: 100%;
		overflow: hidden;
	}
	.leftbox div,.rightbox div{
		margin-bottom: 0.25rem;
		border-radius: 0.2rem;
		background-color: white;
	}
	.leftbox{
		width: 48.5%;
		overflow: hidden;
		float: left;
		
	}
	.rightbox{
		width: 48.5%;
		overflow: hidden;
		float: right;
	}
	.cace_two{
		width: 100%;
		height: 6.65rem;
	}
	.cace_one img{
		width: 100%;
		height: 6.35rem;
		border-radius: 0.2rem;
		background-size: 100%;
	}
	.cace_two img{
		width: 100%;
		height: 4.9rem;
		border-radius: 0.2rem 0.2rem 0 0;
		background-size: 100%;
	}
	.cace_two article{
		position: relative;
	}
	.cace_two img:nth-child(2){
		position: absolute;
		top: 4.6rem;
		right: 0.2rem;
		z-index: 99;
		width: 33%;
		height: 0.55rem;
		border-radius: 0.2rem 0.2rem 0 0;
		background-size: 100%;
	}
	 .cace_two article,.cace_five article{
		 position: relative;
	 }
	.cace_two h3{
	 	text-indent: 0.2rem;
	 	font-size: 0.35rem;
	 	margin-top: 0.2rem;
	 	margin-bottom: 0.4rem;
	 	font-weight: 600;
	 }
	 .cace_two p{
		margin-bottom: 0.1rem;
	 	text-indent: 0.2rem
	 }
	 /* type等于1的样式 */
	  .cace_three{
	 	width: 100%;
	 	height: 6.1rem;
	 	background-color: white;
	 	border-radius: 0.2rem;
	 	margin-bottom: 0.2rem;
	 }
	  .cace_three article img{
	 	width: 100%;
	 	height: 3.6rem;
	 	border-radius: 0.2rem 0.2rem 0 0;
	 	background-size: 100%;
	 }
	  .cace_three article,.cace_four article,.cace_six article{
	 	position: relative;
	 }
	  .cace_three article h4{
	 	position: absolute;
		width: 40%;
	 	left: 0;
	 	top: 0;
	 	color: white;
	 	background: rgba(0,0,0,0.6);
	 	padding: 0.08rem 0.15rem;
	 	border-radius: 0.2rem 0 0.2rem 0;
	 }
	  .cace_three aside h4 ,.cace_four aside h4,.cace_five article h4{
	 	margin-top: 0.15rem;
	 	font-size: 0.35rem;
	 	padding-left: 0.2rem;
	 	line-height: 0.5rem;
	 	height: 1rem;
	 	font-weight: bold;
	 	overflow: hidden;
	 	display: -webkit-box;
	 	-webkit-line-clamp: 2; /* 高度有关 */
	 	/* 超出盒子外的文本用省略号代替 */
	 	-webkit-box-orient: vertical;
	 }
	  .cace_three aside h5{
	 	color: #a2a2a2;
	 	padding-left: 0.2rem;
	 }
	  .cace_three aside article{
	 	display: flex;
	 	align-items: center;
	 	justify-content: space-between;
	 	margin-top: 0.15rem;
	 }
	  .cace_three aside article p strong{
	 	margin-top: 0.2rem;
	 	font-size: 0.4rem;
	 	line-height: 0.6rem;
	 	color: #ff7100;
	 	font-weight: bold;
	 	margin-right: -0.11rem;
	 	
	 }
	  .cace_three aside article p span{
	 	font-size: 0.1rem;
	 	color: #ff7100;
	 	font-weight: normal;
	 	padding-left: 0.15rem;
	 }
	  .cace_three aside article p:nth-child(2){
	 	margin-top: 0.1rem;
	 	width: 48%;
	 	height: 0.4rem;
	 	line-height: 0.4rem;
	 	margin-right: 0.2rem;
	 	text-align: center;
	 	color: #adadad;
	 }
	 .cace_three .re{
	 	position: absolute;
	 	top: 3.35rem;
	 	left: 0.2rem;
	 	text-align: center;
	 	line-height: 0.45rem;
	 	z-index: 99;
	 	width: 20%;
	 	height: 0.45rem;
	 	background-color: #ffd110;
	 }
	  .cace_four{
	 	width: 100%;
	 	height: 7.3rem;
	 	background-color: white;
	 	border-radius: 0.2rem;
	 	margin-bottom: 0.2rem;
	 }
	  .cace_four img{
	 	width: 100%;
	 	height: 5rem;
	 	background-size: 100% 100%;
	 	margin-bottom: 0.1rem;
	 	border-radius: 0.2rem 0.2rem 0 0;
	 }
	  .cace_four .re img{
	 	position: absolute;
	 	width: 40%;
	 	height: 25px;
	 	background-size: 100%;
	 	top: 4.65rem;
	 	left: 0.3rem;
	 }
	  .cace_four aside article{
	 	position: relative;
	 }
	  .cace_four aside img{
	 	width: 80%;
	 	height: 0.7rem;
	 	border-radius: 50%;
	 	background-size: 100%;
	 	margin-top: 0.1rem;
	 	margin-left: 0.26rem;
	 }
	  .cace_four aside img:last-child{
	 	position: absolute;
	 	width: 5%;
	 	height: 0.2rem;
	 	border-radius: 50%;
	 	background-size: 100%;
	 	top: 0.46rem;
	 	left: 0.5rem;
	 }
	  .cace_four aside article{
	 	display: flex;
	 }
	  .cace_four aside article span{
		width: 40%;
		overflow: hidden;
		text-overflow: ellipsis;  /* 省略号 */
		white-space: nowrap; /* 禁止换行 */
	 	margin-top: 0.3rem;
	 	margin-left: 0.2rem;
	 }
	  .cace_four aside article span:last-child{
		 width: 40%;
		 overflow: hidden;
		 text-overflow: ellipsis;  /* 省略号 */
		 white-space: nowrap; /* 禁止换行 */
	 	margin-left: 0.5rem;
	 }
	  .cace_five{
	 	width: 100%;
	 	background-color: aquamarine;
	 	height: 6.7rem !important;
	 	background-color: aqua;
	 	margin-bottom: 0.5rem;
	 }
	  .cace_five img{
	 	width: 100%;
	 	height: 4.8rem;
	 	background-size: 100%;
	 	margin-bottom: 0.2rem;
	 	border-radius: 0.2rem 0.2rem 0 0;
	 }
	  .cace_five .re{
	 	position: absolute;
	 	top: 4.55rem;
	 	left: 0.2rem;
	 	text-align: center;
	 	line-height: 0.45rem;
	 	z-index: 99;
	 	width: 20%;
	 	height: 0.45rem;
	 	background-color: #ffd110;
	 }
	  .cace_five p:last-child{
	 	margin-top: 0.1rem;
	 	text-indent: 0.2rem;
	 }
	 .cace_six{
		 width: 100%;
		 height: 7rem;
		 background-color: aqua;
	 }
	 .cace_six img:first-child{
		 width: 100%;
		 height: 70%;
		 background-size: 100%;
		 border-radius: 0.2rem 0.2rem 0 0;
	 }
	 .cace_six article img{
		 width: 100%;
		 height: 25%;
		 background-size: 100%;
		 border-radius: 0 0 0.2rem 0.2rem !important;
	 }
	 .cace_six article h3{
		 font-size: 14px;
		 color: white;
		 font-weight: bold;
		 position: absolute;
		 top: 0.17rem;
		 left: 1.6rem;
	 }
	 .cace_six article aside{
		 width: 70%;
		 justify-content: space-between;
		 position: absolute;
		 top: 0.9rem;
		 left: 0.6rem;
		 display: flex;
	 }
	  .cace_six article aside p {
		  width: 45%;
		  height: 0.5rem;
		  text-align: center;
		  line-height: 0.5rem;
		  background-color: white;
		  border-radius: 0.3rem;
	  }
	  .cace_six article h4{
		  position: absolute;
		  top: 1.6rem;
		  left: 1.3rem;
		  color: white;
	  }
	  .cace_seven{
		  width: 100%;
		  height: 7rem;
		  margin-bottom: 1.5rem !important;
		  position: relative;
	  }
	  .cace_seven img:nth-child(1){
		  width: 100%;
		  height: 7rem;
		  background-size: 100%;
	  }
	  .cace_seven img:nth-child(2){
		  position: absolute;
		  top: 5.35rem;
		  left: 1.4rem;
		  width: 40%;
		  height: 0.7rem;
		  background-size: 100% 100%;
	  }
	 .cace_seven h3{
		 font-size: 14px;
		 color: white;
		 font-weight: bold;
		 position: absolute;
		 top: 5.5rem;
		 left: 2.05rem;
	  }
	  .cace_seven h4{
		  font-size: 14px;
		  color: black;
		  font-weight: bold;
		  position: absolute;
		  top: 6.4rem;
		  left: 0.35rem;
	  }
</style>
